<template>
	<!-- #ifdef APP -->
	<scroll-view class="container" style="flex: 1">
	<!-- #endif -->
	<!-- #ifdef WEB -->
	<view class="web-container">
	<!-- #endif -->
		<!-- 时间选择器 -->
		<view class="time-selector">
			<view class="time-tabs">
				<view 
					class="time-tab" 
					:class="{active: activeTab === tab.id}" 
					v-for="tab in timeTabs" 
					:key="tab.id"
					@click="switchTimeTab(tab.id)"
				>
					<text class="tab-text">{{tab.label}}</text>
				</view>
			</view>
		</view>

		<!-- 健康评分卡片 -->
		<view class="card score-card">
			<view class="score-header">
				<text class="score-title">健康评分</text>
				<text class="score-date">{{currentDate}}</text>
			</view>
			<view class="score-display">
				<text class="score-value">{{healthScore}}</text>
				<text class="score-unit">分</text>
				<view class="score-trend">
					<text class="trend-text">较昨日 {{scoreTrend > 0 ? '+' : ''}}{{scoreTrend}}</text>
					<text class="trend-icon">{{scoreTrend > 0 ? '↗️' : scoreTrend < 0 ? '↘️' : '➡️'}}</text>
				</view>
			</view>
			<view class="score-bar">
				<view class="score-progress" :style="{width: healthScore + '%'}"></view>
			</view>
		</view>

		<!-- 详细数据 -->
		<view class="data-grid">
			<view class="data-card" v-for="item in healthData" :key="item.id">
				<view class="data-header">
					<text class="data-icon">{{item.icon}}</text>
					<text class="data-title">{{item.title}}</text>
				</view>
				<text class="data-value">{{item.value}}</text>
				<text class="data-subtitle">{{item.subtitle}}</text>
				<view class="data-chart">
					<!-- 简单的图表表示 -->
					<view class="chart-bar" v-for="(bar, index) in item.chartData" :key="index" :style="{height: bar + '%'}"></view>
				</view>
			</view>
		</view>

		<!-- 异常提醒 -->
		<view class="card alert-card" v-if="alerts.length > 0">
			<view class="alert-header">
				<text class="alert-title">⚠️ 健康提醒</text>
			</view>
			<view class="alert-list">
				<view class="alert-item" v-for="alert in alerts" :key="alert.id">
					<view class="alert-dot" :class="alert.level"></view>
					<text class="alert-text">{{alert.message}}</text>
					<text class="alert-time">{{alert.time}}</text>
				</view>
			</view>
		</view>

		<!-- AI健康建议 -->
		<view class="card suggestion-card">
			<view class="suggestion-header">
				<text class="suggestion-title">🤖 AI健康建议</text>
			</view>
			<view class="suggestion-list">
				<view class="suggestion-item" v-for="suggestion in aiSuggestions" :key="suggestion.id">
					<text class="suggestion-icon">{{suggestion.icon}}</text>
					<view class="suggestion-content">
						<text class="suggestion-text">{{suggestion.text}}</text>
						<text class="suggestion-reason">{{suggestion.reason}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 导出分享 -->
		<view class="action-buttons">
			<view class="action-button primary" @click="exportReport">
				<text class="button-text">📊 导出报告</text>
			</view>
			<view class="action-button secondary" @click="shareReport">
				<text class="button-text">📤 分享报告</text>
			</view>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
	<!-- #ifdef WEB -->
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				// 时间标签
				timeTabs: [
					{id: 'today', label: '今天'},
					{id: 'week', label: '本周'},
					{id: 'month', label: '本月'},
					{id: 'year', label: '本年'}
				],
				activeTab: 'week',
				
				// 当前日期
				currentDate: '2024年1月15日',
				
				// 健康评分
				healthScore: 85,
				scoreTrend: 3,
				
				// 健康数据
				healthData: [
					{
						id: 1,
						icon: '💗',
						title: '心率',
						value: '72',
						subtitle: '平均心率 (次/分)',
						chartData: [60, 75, 80, 70, 65, 75, 85]
					},
					{
						id: 2,
						icon: '🩸',
						title: '血氧',
						value: '98%',
						subtitle: '平均血氧饱和度',
						chartData: [95, 97, 98, 99, 97, 98, 96]
					},
					{
						id: 3,
						icon: '😴',
						title: '睡眠',
						value: '7.5h',
						subtitle: '平均睡眠时长',
						chartData: [70, 80, 65, 85, 75, 90, 75]
					},
					{
						id: 4,
						icon: '🏃',
						title: '运动',
						value: '45min',
						subtitle: '日均运动时长',
						chartData: [40, 60, 30, 50, 45, 70, 35]
					}
				],
				
				// 异常提醒
				alerts: [
					{
						id: 1,
						level: 'warning',
						message: '昨夜心率偏高，建议关注',
						time: '2小时前'
					},
					{
						id: 2,
						level: 'info',
						message: '本周运动量不足，建议增加',
						time: '1天前'
					}
				],
				
				// AI建议
				aiSuggestions: [
					{
						id: 1,
						icon: '💪',
						text: '建议增加有氧运动',
						reason: '基于您的心率变异性分析'
					},
					{
						id: 2,
						icon: '😴',
						text: '保持规律作息',
						reason: '您的睡眠质量有所改善'
					},
					{
						id: 3,
						icon: '🥗',
						text: '注意饮食均衡',
						reason: '结合您的血糖波动数据'
					}
				]
			}
		},
		
		onLoad() {
			this.loadReportData()
		},
		
		methods: {
			// 加载报告数据
			loadReportData() {
				// 这里可以调用API获取报告数据
				console.log('加载报告数据')
			},
			
			// 切换时间标签
			switchTimeTab(tabId) {
				this.activeTab = tabId
				this.loadReportData()
				uni.showToast({
					title: `切换到${this.timeTabs.find(t => t.id === tabId).label}`,
					icon: 'none'
				})
			},
			
			// 导出报告
			exportReport() {
				uni.showActionSheet({
					itemList: ['导出为PDF', '导出为图片', '导出为Excel'],
					success: (res) => {
						const formats = ['PDF', '图片', 'Excel']
						uni.showToast({
							title: `导出${formats[res.tapIndex]}功能开发中`,
							icon: 'none'
						})
					}
				})
			},
			
			// 分享报告
			shareReport() {
				uni.showActionSheet({
					itemList: ['分享给医生', '分享给家人', '生成分享链接'],
					success: (res) => {
						const actions = ['分享给医生', '分享给家人', '生成分享链接']
						uni.showToast({
							title: `${actions[res.tapIndex]}功能开发中`,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		padding: 12px;
	}

	/* #ifdef WEB */
	.web-container {
		background-color: #f5f5f5;
		padding: 20px;
		min-height: 100vh;
		max-width: 1200px;
		margin: 0 auto;
		overflow-y: auto;
	}
	/* #endif */

	.card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 时间选择器 */
	.time-selector {
		margin-bottom: 16px;
	}

	.time-tabs {
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		border-radius: 12px;
		padding: 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.time-tab {
		flex: 1;
		padding: 8px 12px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.time-tab.active {
		background-color: #007AFF;
	}

	.tab-text {
		font-size: 14px;
		color: #666666;
	}

	.time-tab.active .tab-text {
		color: #ffffff;
		font-weight: 500;
	}

	/* 健康评分卡片 */
	.score-card {
		margin-bottom: 16px;
	}

	.score-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.score-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.score-date {
		font-size: 14px;
		color: #666666;
	}

	.score-display {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		margin-bottom: 12px;
	}

	.score-value {
		font-size: 48px;
		font-weight: 700;
		color: #007AFF;
	}

	.score-unit {
		font-size: 16px;
		color: #666666;
		margin-left: 4px;
		margin-right: 16px;
	}

	.score-trend {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.trend-text {
		font-size: 14px;
		color: #00d4aa;
		margin-right: 4px;
	}

	.trend-icon {
		font-size: 14px;
	}

	.score-bar {
		height: 8px;
		background-color: #f0f0f0;
		border-radius: 4px;
		overflow: hidden;
	}

	.score-progress {
		height: 100%;
		background: linear-gradient(90deg, #007AFF, #00d4aa);
		border-radius: 4px;
		transition: width 0.3s ease;
	}

	/* 数据网格 */
	.data-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}

	.data-card {
		flex: 1;
		min-width: 160px;
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.data-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 8px;
	}

	.data-icon {
		font-size: 16px;
		margin-right: 8px;
	}

	.data-title {
		font-size: 14px;
		color: #666666;
		font-weight: 500;
	}

	.data-value {
		font-size: 24px;
		font-weight: 700;
		color: #333333;
		margin-bottom: 4px;
	}

	.data-subtitle {
		font-size: 12px;
		color: #999999;
		margin-bottom: 12px;
	}

	.data-chart {
		display: flex;
		flex-direction: row;
		align-items: end;
		height: 32px;
	}

	.chart-bar {
		flex: 1;
		background-color: #007AFF;
		margin: 0 1px;
		border-radius: 2px;
		min-height: 4px;
		opacity: 0.7;
	}

	/* 异常提醒 */
	.alert-card {
		border-left: 4px solid #ff6b35;
		margin-bottom: 16px;
	}

	.alert-header {
		margin-bottom: 12px;
	}

	.alert-title {
		font-size: 16px;
		font-weight: 600;
		color: #ff6b35;
	}

	.alert-list {
		display: flex;
		flex-direction: column;
	}

	.alert-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 8px;
	}

	.alert-item:last-child {
		margin-bottom: 0;
	}

	.alert-dot {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		margin-right: 12px;
	}

	.alert-dot.warning {
		background-color: #ff6b35;
	}

	.alert-dot.info {
		background-color: #007AFF;
	}

	.alert-text {
		flex: 1;
		font-size: 14px;
		color: #333333;
	}

	.alert-time {
		font-size: 12px;
		color: #999999;
	}

	/* AI建议 */
	.suggestion-card {
		margin-bottom: 16px;
	}

	.suggestion-header {
		margin-bottom: 12px;
	}

	.suggestion-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.suggestion-list {
		display: flex;
		flex-direction: column;
	}

	.suggestion-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 12px;
		padding: 12px;
		background-color: #f8f9fa;
		border-radius: 8px;
	}

	.suggestion-item:last-child {
		margin-bottom: 0;
	}

	.suggestion-icon {
		font-size: 16px;
		margin-right: 12px;
	}

	.suggestion-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.suggestion-text {
		font-size: 14px;
		color: #333333;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.suggestion-reason {
		font-size: 12px;
		color: #666666;
	}

	/* 操作按钮 */
	.action-buttons {
		display: flex;
		flex-direction: row;
		margin-bottom: 24px;
	}

	.action-button {
		flex: 1;
		height: 48px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 6px;
	}

	.action-button.primary {
		background-color: #007AFF;
	}

	.action-button.secondary {
		background-color: #f0f0f0;
	}

	.button-text {
		font-size: 16px;
		font-weight: 500;
	}

	.action-button.primary .button-text {
		color: #ffffff;
	}

	.action-button.secondary .button-text {
		color: #333333;
	}

	/* Web平台适配 */
	/* #ifdef WEB */
	.time-tab {
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.time-tab:hover {
		background-color: rgba(0, 122, 255, 0.1);
	}

	.time-tab.active:hover {
		background-color: #007AFF;
	}

	.action-button {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.action-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
	/* #endif */

	/* Android状态栏适配 */
	/* #ifdef APP-ANDROID */
	.container {
		padding-top: 25px;
	}
	/* #endif */
</style> 